// 商品详情页面
var cook;
var goodsid;
$(function () {
    //判断是否登录
    if (isLogin()) {
        cook = getCookie('username');
        $('.logined').show().find('.user_name').html(cook);
        $('.logg').hide();
        $('.regii').hide();
        // console.log($(window).prop('location').href);
        goodsid = $(window).prop('location').href.split('?')[1].split('=')[1];
    }

    //显示指定商品的详情页   接口
    $.get('php/getGoodsInfo.php?goodsId=' + goodsid, function (reg) {
        let ele = JSON.parse(reg);
        let str = '';
        str += `
                    <p class="info_tp">
                        <a href="">首页</a>
                        <span>&gt;</span>
                        <a href="">${ele.goodsType}</a>
                        <span>&gt;</span>
                        <a href="">${ele.goodsName}</a>
                        <span>&gt;</span>
                        <b>${ele.goodsDesc}</b>
                    </p>
                    <div class="info_left">
                        <div class="yuan_img">
                            <img src="${ele.goodsImg}" alt="">
                            <div class="guang"></div>
                        </div>
                        <div class="fangda_img">
                            <img src="${ele.goodsImg}" alt="">
                        </div>
                        <div class="screen">
                            <ul>
                                <li class="bodd"><a href=""><img src="${ele.goodsImg}" alt=""></a></li>
                                <li><a href=""><img src="${ele.beiyong2}" alt=""></a></li>
                                <li><a href=""><img src="${ele.beiyong3}" alt=""></a></li>
                                <li><a href=""><img src="${ele.beiyong4}" alt=""></a></li>
                                <li><a href=""><img src="${ele.beiyong5}" alt=""></a></li>
                                <li><a href=""><img src="${ele.beiyong6}" alt=""></a></li>
                                <li><a href=""><img src="${ele.beiyong7}" alt=""></a></li>
                            </ul>

                        </div>
                        <span class="lf">&lt;</span>
                        <span class="gi">&gt;</span>
                    </div>
                    <div class="info_right">
                        <p class="ir1">${ele.goodsDesc}</p>
                        <div class="ir2">
                            <p>
                                <span>价格</span>
                                <b>¥<span>${ele.goodsPrice}.00</span></b>
                            </p>
                            <p><span id="s1">促销</span><strong>赠送积分</strong><span id="s2">购买即赠商城积分，积分可抵现~</span></p>
                        </div>
                        <div class="ir3">
                            <p>
                                <span>服务说明</span>
                                <b>已满48元包邮&nbsp;&nbsp;由华为终端提供商品、发货开票及售后服务</b>
                                &nbsp;&nbsp;<a href="">查看详情</a>
                            </p>
                            <p><span>商品编号</span>
                                <b>${ele.goodsId}</b>
                            </p>
                        </div>
                        <div class="ir4">
                            <p class="p_1">
                                <span>选择颜色</span>
                                <button>亮黑色</button>
                                <button>釉白色</button>
                                <button>秘银色</button>
                            </p>
                            <p class="p_2">
                                <span>选择版本</span>
                                <button>4G全网通 8+256GB</button>
                                <button>4G全网通 6+128GB</button>
                            </p>
                            <p class="p_3">
                                <span>选择套餐</span>
                                <button>官方标配</button>
                            </p>
                            <p class="p_4">
                                <span>保障服务</span>
                                <button>华为无忧服务&nbsp;¥&nbsp;1299</button>
                                <button>碎屏服务宝1年&nbsp;¥&nbsp;399</button>
                                <button>延长服务宝1年&nbsp;¥&nbsp;368</button>
                            </p>
                            <p class="p_5">
                                <span>分期免息</span>
                                <button>花呗分期&nbsp;¥&nbsp;1299</button>
                                <button>掌上生活分期&nbsp;¥&nbsp;399</button>
                            </p>
                        </div>
                        <p class="ir5">
                            已选择商品：<span>${ele.beiyong1} / ${ele.goodsDesc} / 官方标配</span>
                        </p>
                        <div class="ir6">
                            <div class="i6_lef">
                                <input type="text" class="nn" value="1">
                                <input type="button" value="+" class="a">
                                <input type="button" value="-" class="n">
                            </div>
                            <div class="i6_right">
                                <button class="jia_shop">加入购物车</button>
                                <button class="xia_shop">立即下单</button>
                            </div>
                        </div>
                    </div>        
            `

        $('.info_con').html(str);

        var $small_box = $('.info_con').find('.yuan_img');//小盒子
        var $big_box = $('.info_con').find('.fangda_img');//大盒子
        var $zhe_box = $('.info_con').find('.guang');//遮罩层

        console.log($small_box);
        console.log($big_box);
        console.log($zhe_box);


        $small_box.on('mouseover', function () {
            //滑入
            $big_box.show();
            $zhe_box.show();
            $zhe_box.css('cursor', 'pointer')
        })
        $small_box.on('mouseover', function (e) {
            //滑动
            let ev = e || window.event;
            //获取光标距离小盒子的坐标
            let x = ev.pageX - $(this).offset().left;
            let y = ev.pageY - $(this).offset().top;

            //获取遮罩层的相对小盒子坐标
            let mv_x = x - $zhe_box.width() / 2;
            let mv_y = y - $zhe_box.height() / 2;

            //限制边界
            let max_wid = $small_box.width() - $zhe_box.width();
            let max_hei = $small_box.height() - $zhe_box.height();

            if (mv_x <= 0) {
                mv_x = 0;
            }
            if (mv_y <= 0) {
                mv_y = 0;
            }
            if (mv_x >= max_wid) {
                mv_x = max_wid;
            }
            if (mv_y >= max_hei) {
                mv_y = max_hei;
            }

            $zhe_box[0].style.left = mv_x + 'px';
            $zhe_box[0].style.top = mv_y + 'px';

            let lix = getBili($small_box, $big_box, max_wid, max_hei)[0];
            let liy = getBili($small_box, $big_box, max_wid, max_hei)[1];

            $big_box.find('img')[0].style.left = -mv_x * lix + 'px';
            $big_box.find('img')[0].style.top = -mv_y * liy + 'px';

        })
        $small_box.on('mouseout', function () {
            //滑出
            $big_box.hide();
            $zhe_box.hide();
        })

        //展示图片下边的选项卡
        //箭头功能
        var index = 0;
        var len1 = 7;
        // console.log($('.info_con li'));
        // console.log(len1);
        $('.info_con').on('click', ' .gi', function () {
            index++;
            if (index >= len1 - 5) {
                index = len1 - 5;
            }
            $('.screen ul').animate({
                'left': -81 * index + 'px',
            })
        })
        $('.info_con').on('click', '.lf', function () {
            index--;
            if (index <= 0) {
                index = 0;
            }
            $('.screen ul').animate({
                'left': -81 * index + 'px',
            })
        })

        //滑过li ,改变大小盒子的图片
        $('.info_con').on('mouseover', 'li', function () {
            let $src = $(this).find('img').prop('src');
            $(this).addClass('bodd').siblings('li').removeClass('bodd');
            $small_box.find('img').prop('src', $src);
            $big_box.find('img').prop('src', $src);
        })


    })

    //登录后的首页，点击用户中心的退出登录，清除ookie
    $('.user_center .user_4').on('click', function () {
        deleCookie('username');
        $(window).prop('location', 'goods_info.html');
    })

    //加入购物车
    $('.info_con').on('click', '.jia_shop', function () {
        let shop_num = $('.i6_lef .nn').val();
        $.post('php/addShoppingCart.php', {
            'vipName': cook,
            'goodsId': goodsid,
            'goodsCount': shop_num,
        }, function (reg) {
            if (reg == '1') {
                alert('添加购物车成功!');
            }
            else {
                alert('添加购物车失败!');
            }
        })
    })



    function getBili(small, big, mx, my) {
        //获取比例
        //small  小盒子
        //big 大盒子
        //获取大盒子图片最大可移动范围
        let arr = [];
        let max_wid = $('.fangda_img img').width() - $('.fangda_img').width();
        let max_hei = $('.fangda_img img').height() - $('.fangda_img').height();

        let bi_x = max_wid / mx;
        let bi_y = max_hei / my;

        return [bi_x, bi_y];
    }



    //加入购物车旁加减功能
    $('.info_con').on('click', '.a', function () {
        let val = $(this).prev().val();
        val++;
        $(this).prev().val(val);
    })
    $('.info_con').on('click', '.n', function () {
        let val = $(this).prev().prev().val();
        val--;
        if (val <= 1) {
            val = 1;
        }
        $(this).prev().prev().val(val);
    })

    //评论区
    //进入页面，获取评论内容
    $.get('php/getComment.php?goodsId=' + goodsid + '&pagecount=7' + '&pageIndex=1', function (reg) {
        let resu = JSON.parse(reg);
        let str = '';
        resu.forEach(ele => {
            str += `
            <li>
                <div class="li_left">
                    <span class="use_name">${ele.vipName}</span>
                </div>
                <div class="li_right">
                    <span class="xing">★★★★</span>
                    <p class="comm_con">
                        ${ele.content}
                    </p>
                    <span class="comm_time">
                        ${ele.commentTime} 
                    </span>
                </div>
            </li>  `
        })
        $('.com_ul').html(str);
    })



    //点击发布评论，添加评论
    $('.comm_div button').on('click', function () {
        //获取输入的评论内容
        let comm_val = $(this).prev();
        if (comm_val.val() == '') {
            alert('请输入内容!')
        } else {
            //调接口
            $.post('php/addComment.php', {
                'vipName': cook,
                'goodsId': goodsid,
                'content': comm_val.val()
            }, function (reg) {
                if (reg == 'success') {
                    alert('恭喜！发布评论成功!');
                    comm_val.val('');//清空文本框内容
                } else {
                    alert('抱歉！请重新发布');
                }
            })
        }
    })
})



